<template>
   <div class="clearfix">
    <a-upload
      action=" http://192.168.2.2:3000/fileUpload"
      list-type="picture-card"
      v-model:file-list="fileList"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="fileList.length < 8">
        
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" >
      <!-- <img alt="example" style="width: 100%" :src="previewImage" /> -->
    </a-modal>
  </div>
  <hr>
  <div class="clearfix">
    <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
      <a-button>
        
        Select File
      </a-button>
    </a-upload>
    <a-button
      type="primary"
      :disabled="fileList.length === 0"
      :loading="uploading"
      style="margin-top: 16px"
      @click="handleUpload"
      @change="handleChange"
    >
      {{ uploading ? 'Uploading' : 'Start Upload' }}
    </a-button>
  </div>
  
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import request from 'umi-request';

function getBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  percent?: number;
  url?: string;
  preview?: string;
  originFileObj?: any;
}

interface FileInfo {
  file: FileItem;
  fileList: FileItem[];
}
const handleChange = (info: FileInfo) => {
      if (info.file.status !== 'uploading') {
        
      }
      if (info.file.status === 'done') {
        console.log(info.file, info.fileList);
        
        iurl=(info.file.response)
        console.log(iurl.failureReason,114);
        if(iurl.resultStates=='1'){
          message.error(iurl.failureReason)
        }else{
        message.success("上传成功");
        }
      } else if (info.file.status === 'error') {
        message.error("上传失败");
      }
     return iurl
    }

    let iurl:any = ''
const handlePreview = async (file: FileItem) => {
      if (!file.url && !file.preview) {
        file.preview = (await getBase64(file.originFileObj)) as string;
      }
      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
   
      
      
    };
    const previewVisible = ref<boolean>(false);
    const previewImage = ref<string | undefined>('');
      const fileList = ref<FileItem[]>([
      
      ]);
       
    const uploading = ref<boolean>(false);

    const handleRemove = (file: FileItem) => {
      const index = fileList.value.indexOf(file);
      const newFileList = fileList.value.slice();
      newFileList.splice(index, 1);
      fileList.value = newFileList;
    };

    const beforeUpload = (file: FileItem) => {
      fileList.value = [...fileList.value, file];
      return false;
      
    };

    const handleUpload = (info:FileInfo) => {
      
      const formData = new FormData();
      fileList.value.forEach((file: FileItem) => {
        formData.append('files[]', file as any);
      });
      
        console.log(info.file,123123123);

      console.log(formData);
      
      uploading.value = true;
       console.log(uploading,1234);
       
      // You can use any AJAX library you like
      request(' http://192.168.2.2:3000/fileUpload', {
        method: 'post',
        data: formData,
      })
        .then((res:any) => {
          console.log(res,114);
          
          fileList.value = [];
          uploading.value = false;
          console.log(formData,123123);
          
          if(res.resultStates=='1'){
          message.error(res.failureReason)
          // fileList.value.response=(res.failureReason)
        }else{
           message.success("上传成功");
        }
        })
        .catch(() => {
          uploading.value = false;
          // message.error('upload failed.');
        });
    };
  </script>